<template>
    <div class="Salary">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            毕业生薪资分布
        </p>
    </div>
    <div ref="chart" class="Salary_B">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const Salary = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
            textStyle: { color: '#ffffff' }, // 图例文字颜色改成白色
            icon: 'circle', // 将图例的图标设置为圆形
            textStyle: {
                color: '#fff', // 图例文字颜色为深色
                fontSize: 10
            },
            top: 15,
            itemWidth: 10, // 设置圆点的宽度（大小）
            itemHeight: 10, // 设置圆点的高度（大小）
        },
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                height: "70%",//强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    show: true, // 是否显示引导线
                    length: 20, // 第一段线长度
                    length2: 10, // 第二段线长度
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit' },
                    { value: 40, name: 'Inquiry' },
                    { value: 20, name: 'Order' },
                    { value: 80, name: 'Click' },
                    { value: 100, name: 'Show' }
                ]
            }
        ]
    };

    // 绘制图表
    myChart.setOption(option)
}

onMounted(() => {
    Salary();
});

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});


</script>

<style lang="scss" scoped>
.Salary {
    position: fixed;
    right: 80px;
    top: 400px;
    width: 350px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Salary_B {
    position: fixed;
    right: -55px;
    top: 445px;
    width: 350px;
    height: 260px;
    background: rgba(12, 29, 95, 1);
}
</style>